<template>
	<a-modal :title="modal.title" :visible="modal.visible" maskClosable width="900px" @cancel="$emit('done')"
		@ok="submit">
		<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
			<a-form-item label="id" style="display: none;">
				<a-input v-decorator="['id']" />
			</a-form-item>

			<a-form-item label="productId" style="display: none;">
				<a-input v-decorator="['productId']" />
			</a-form-item>

			<a-form-item label="计划书名称">
				<a-input v-decorator="['dutyName',{ rules: [{ required: true, message: '请输入【计划书名称】' }] }]" />
			</a-form-item>
			<a-form-item label="费率表名称">
				<a-input v-decorator="['recordName',{ rules: [{ required: false, message: '请输入【费率表名称】' }] }]" />
			</a-form-item>

			<a-form-item label="产品对比名称">
				<a-input v-decorator="['compareName',{ rules: [{ required: false, message: '请输入【产品对比名称】' }] }]" />
			</a-form-item>

			<a-form-item label="责任类型">
				<a-select show-search v-decorator="['parentState',{ rules: [{ required: false, message: '请选择【责任类型】' }] }]">
					<a-select-option v-for="(item,index) in parentStateList" :key="index"
						:value="item.id">{{ item.name }}</a-select-option>
				</a-select>
			</a-form-item>

			<a-form-item label="父级责任">
				<a-select show-search v-decorator="['parentId',{ rules: [{ required: false, message: '请选择【父级责任】' }] }]">
					<a-select-option v-for="(item,index) in parentList" :key="index"
						:value="item.id">{{ item.dutyName }}</a-select-option>
				</a-select>
			</a-form-item>

			<a-form-item label="是否必选">
				<a-radio-group v-decorator="['isMust', { rules: [{ required: true, message: '请选择【是否必选】' }] }]">
					<a-radio :value="0">否</a-radio>
					<a-radio :value="1">是</a-radio>
				</a-radio-group>
			</a-form-item>

			<a-form-item label="赔付规则">
				<a-textarea allow-clear placeholder="请输入【赔付规则】"
					v-decorator="['dutyRule', { rules: [{ required: false, message: '请输入【赔付规则】' }] }]"
					:style="{ width: '100%',  display: 'inline-block' }">
				</a-textarea>
			</a-form-item>

			<a-form-item label="备注信息">
				<a-textarea allow-clear placeholder="请输入【备注信息】" v-decorator="['dutyMemo']"
					:style="{ width: '100%',  display: 'inline-block' }">
				</a-textarea>
			</a-form-item>

			<a-form-item label="赔付基数是否为保额">
				<a-radio-group v-decorator="['isBasePay', { rules: [{ required: true, message: '请选择【赔付基数是否为保额】' }] }]">
					<a-radio :value="0">否</a-radio>
					<a-radio :value="1">是</a-radio>
				</a-radio-group>
			</a-form-item>

			<a-form-item label="是否需要计算赔付金额">
				<a-radio-group v-decorator="['isCalculatePay', { rules: [{ required: true, message: '请选择【是否需要计算赔付金额】' }] }]">
					<a-radio :value="0">否</a-radio>
					<a-radio :value="1">是</a-radio>
				</a-radio-group>
			</a-form-item>

			<a-form-item label="是否限定年龄">
				<a-radio-group v-decorator="['dutySexyLimit', { rules: [{ required: true, message: '请选择【是否限定年龄】' }] }]">
					<a-radio :value="0">否</a-radio>
					<a-radio :value="1">是</a-radio>
				</a-radio-group>
			</a-form-item>

			<a-form-item label="限定起始年龄" v-if="form.getFieldValue('dutySexyLimit') == 1">
				<a-input-number :min="0" :precision="0" placeholder="请输入【限定起始年龄】"
					v-decorator="['dutySexyLimitMin', { rules: [{ required: true, message: '请输入【限定起始年龄】' }] }]"
					:style="{ width: '100%', textAlign: 'center', display: 'inline-block' }" />
			</a-form-item>

			<a-form-item label="限定截止年龄" v-if="form.getFieldValue('dutySexyLimit') == 1">
				<a-input-number :min="0" :precision="0" placeholder="请输入【限定截止年龄】"
					v-decorator="['dutySexyLimitMax', { rules: [{ required: true, message: '请输入【限定截止年龄】' }] }]"
					:style="{ width: '100%', textAlign: 'center', display: 'inline-block' }" />
			</a-form-item>

			<!--      <a-form-item label="标签">
        <a-input v-decorator="['dutyLabel']" />
      </a-form-item> -->

			<a-form-item label="排序号">
				<a-input-number :min="0" :precision="0" placeholder="请输入【排序号】"
					v-decorator="['sortOrder', { rules: [{ required: true, message: '请输入【排序号】' }] }]"
					:style="{ width: '100%', textAlign: 'center', display: 'inline-block' }" />
			</a-form-item>

		</a-form>
	</a-modal>
</template>

<script>
	import { add, update, listByPage as listParentAll } from '@/api/aibao/product/serious'
	import { listProductForSelect } from '@/api/aibao/product/product'
	import { listProductIndemnifyForSelect } from '@/api/aibao/product/indemnify'
	import { listCompanyForSelect } from '@/api/company'

	import pick from 'lodash.pick'
	const fields = ['id', 'productId', 'dutyName', 'recordName', 'isMust', 'compareName', 'parentState', 'parentId',
		'dutyRule',
		'dutyMemo', 'isBasePay', 'isCalculatePay',
		'dutySexyLimit', 'dutySexyLimitMin', 'dutySexyLimitMax', 'sortOrder'
	]

	export default {
		props: {
			modal: {
				type: Object,
				required: true
			},
		},
		data() {
			return {
				form: this.$form.createForm(this),
				companys: [], //保司列表
				indemnifies: [], //保障期列表
				products: [], //产品列表
				parentList: [], //父级责任列表
				parentStateList: [{
					id: 1,
					name: '父级'
				}, {
					id: 0,
					name: '子级'
				}],
			}
		},
		created() {
			fields.forEach(v => this.form.getFieldDecorator(v))
			this.$watch('modal', () => {
				if (this.modal) {
          this.listParentAll()
					// console.log('dd==', this.modal.form)
					this.form.setFieldsValue(pick(this.modal.form, fields))
				}
			}, { deep: true })
      
      // 首先确保 fields 数组中的元素都是字符串类型
      // fields.forEach(v => {
      //   if (typeof v === 'string') {
      //     this.form.getFieldDecorator(v)
      //   } else {
      //     console.error('Invalid field type:', v);
      //   }
      // });
      // // 优化 watcher，增加必要的存在性检查
      // this.$watch('modal', (newVal) => {
      //   if (newVal && newVal.form) {
      //     console.log('dd==', newVal.form);
      //     this.listParentAll()
      //     try {
      //       // 使用 lodash 的 pick 函数提取所需字段
      //       this.form.setFieldsValue(_.pick(newVal.form, fields.filter(f => typeof f === 'string')));
      //     } catch (error) {
      //       console.error('Error setting form values:', error);
      //     }
      //   }
      // }, { deep: true });

		},
		methods: {
			listParentAll() {
				listParentAll({
					productId: this.modal.form.productId,
					page: 1,
					limit: 500,
					parentState: 1
				}).then(res => {
					this.parentList = res.data.records
				}).catch(() => {})
			},
			submit() {
				this.form.validateFields((errors, values) => {
					if (!errors) {
						let params = { ...values }
						if (params.dutySexyLimit == 0) {
							params.dutySexyLimitMin = 0
							params.dutySexyLimitMax = 0
						}

						const api = values.id ? update : add
						api(values)
							.then(res => {
								this.$message.success('操作成功')
								this.$emit('done')
							})
							.catch(() => {})
					}
				})
			},
		},

	}
</script>